@import './reset';
@import'./header';
@import'./footer';
html,
body {
    width: 100%;
    height: 100%;
}

main {
    background-color: #F5F5F5;
    overflow: hidden;
    .order {
        width: 1000px;
        margin: 100px auto;
        height: 600px;
        display: flex;
        .left {
            width: 170px;
            height: 100%;
            display: flex;
            background-color: #fff;
            flex-direction: column;
            div {
                line-height: 55px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                i {
                    width: 20px;
                    height: 20px;
                    background-color: sandybrown;
                }
            }
        }
        .right {
            width: 100%;
            height: 100%;
            margin-left: 15px;
            position: relative;
            background-color: #fff;
            .right-wrap {
                overflow-y: auto;
                height: 600px;
                .order-shop {
                    width: 100%;
                    height: 160px;
                    margin: 10px auto;
                    .order-name {
                        width: 100%;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        color: black;
                        span {
                            width: 20px;
                            height: 20px;
                            background: url(/images/kegicon.jpg) no-repeat center center;
                            background-size: 100% 100%;
                            margin: 5px;
                        }
                        h3 {
                            font-size: 16px;
                        }
                    }
                    .order-content {
                        width: 100%;
                        border-top: 1px solid #ccc;
                        display: flex;
                        text-align: center;
                        cursor: pointer;
                        background-color: white;
                        height: 120px;
                        .order-check {
                            width: 50px;
                            height: 80px;
                            position: relative;
                            .order-checked {
                                width: 15px;
                                height: 15px;
                                position: absolute;
                                right: 0;
                                top: 60%;
                            }
                        }
                        ul {
                            width: 100%;
                            display: flex;
                            justify-content: space-around;
                            align-items: center;
                            li {
                                img {
                                    width: 80px;
                                    height: 80px;
                                    border: 1px solid #eee;
                                }
                                .foot-name {
                                    font-size: 16px;
                                    a {
                                        color: black;
                                    }
                                }
                                .foot-content {
                                    i {
                                        font-size: 14px;
                                        color: #9c9c9c;
                                        font-style: normal;
                                    }
                                }
                                .foot-price {
                                    font-size: 16px;
                                    font-weight: 600;
                                }
                                .foot-num {
                                    border: 1px solid #ccc;
                                    a {
                                        width: 15px;
                                        height: 15px;
                                        display: inline-block;
                                        line-height: 15px;
                                        color: #ccc;
                                    }
                                    input {
                                        width: 50px;
                                        border: none;
                                        height: 25px;
                                        border: 1px solid #ccc;
                                        text-align: center;
                                        outline: none;
                                    }
                                }
                                .foot-del {
                                    a {
                                        color: black;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .order-close {
            width: 100%;
            height: 50px;
            position: absolute;
            right: 0px;
            bottom: 0px;
            display: flex;
            justify-content: space-between;
            overflow-x: hidden;
            overflow-y: hidden;
            background-color: #eee;
            cursor: pointer;
            .order-left {
                flex: 1;
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-left: 10px;
                input {
                    widows: 20px;
                }
                span {
                    width: 40px;
                    display: block;
                    margin: 5px;
                }
                a {
                    color: black;
                    flex: 2;
                }
            }
            .order-right {
                flex: 2;
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                    color: #E2231A;
                    width: 10px;
                    margin: 5px;
                    display: inline;
                }
                .account {
                    background-color: #e54346;
                    height: 100%;
                    width: 80px;
                    text-align: center;
                    line-height: 50px;
                    a {
                        font-size: 18px;
                        font-weight: 600;
                        color: white;
                    }
                }
            }
        }
    }
}

.active {
    background: url(/images/gwck.gif) no-repeat center center;
    background-size: 60% 60%;
}